// 车险订单信息
<template>

<c-form-block-container :title='"订单信息"'>
   
    <div class="car-form-order-info">

        <!-- 会员列表 -->
        <Modal v-model="mebmerTableSwitch" :width='1200' @on-ok='select'>
            
            <!-- 添加 v-if 保证创建时能获取到容器高度，以限制人员表格的高度  -->
            <l-organization-select v-if='mebmerTableSwitch' :companys='companys' :personalList='personalList' :height='520'></l-organization-select>
            
        </Modal>
        
        <!-- 加载提示 -->
        <c-loading v-if='isEmptyObj(data)'></c-loading>


        <div class="info-container" v-else>
                
             <h1 class="orderId header"> 
                {{data.Did || data.SorderId}}
            </h1>
            
            <div class="info-content">
                <Row>
                    <Col :span='24'>
                        
                        <div class="member">

                            <div class="header">

                                <div class="head-portrait">
                                    <img :src="userHeadPortrait" alt="用户头像">
                                </div>

                            </div>

                            <div class="member-info">

                                <div class="edit">
                                    <Button type='primary' @click='mebmerTableSwitch = !mebmerTableSwitch'>
                                        <i class="iconfont icon-brush_fill"></i>
                                        选择会员
                                    </Button>
                                </div>

                                <div class="content">
                                    <Row>
                                        <Col :span='item.span' v-for='(item, key) of memberInfoConf' :key='key'>
                                            <div :class="key" class='member-info-item'>
                                                <i class="iconfont" :class='item.icon' v-if='item.icon'></i>
                                                <span class="text">
                                                    {{data[item.key]}}
                                                </span>
                                            </div>
                                        </Col>
                                    </Row>
                                </div>
                                
                                
                            </div>
                            
                        </div>
                    
                    </Col>

                    <Col :span='24'>

                         <div class="order-info">
                            <ul>
                                <li class="item header">
                                    <c-status-label  :val='carStateStore.getVal(data.Sstatus)'>
                                    </c-status-label> 

                                    <div class="time">
                                        {{formatDate(data.SDcreateAt)}} - {{formatDate(data.SlastUpdateDate)}}
                                    </div>
                                    
                                </li>


                                <li class='item txt' v-if='data.Sstatus === "撤回核保"'> 
                                    {{data.SDreviewFailedMessage}}
                                </li>
                                
                                <li class='item upload-file' @click='uploadSwitch'> 

                                    <div class="file-label">
                                        <span class="icon">
                                                <i class="iconfont icon-bill"></i>
                                        </span>
                                        订单附件
                                    </div>
                                    <div class="file-num">
                                        <span>
                                            {{carUpFileLength}}
                                        </span>
                                    </div>
                                 
                                </li>
                                

                            </ul>
                        </div>
                        
                    </Col>
                    
                </Row>

            </div>
            
        </div>

    </div>

</c-form-block-container>


</template>

<script lang='ts'>
import {Component,Prop, Watch, Vue} from 'vue-property-decorator' 
import {mapState, mapMutations} from 'vuex'
import {isEmptyObj} from '@/utils/tools.ts'
import stateStore from '@/components/ivew_conf/state_store.ts'
import imgs from '@/img_path.json'

let carStateStore = new stateStore();


import carUpload from '@/components/form_tools/funs/car_upload'
const organizationSelet = () => import('@/components/ivew_components/organization_select/index.vue')


@Component({
    computed: {
         ...mapState('organizationStore', ['personalList', 'companys'])
    },
    components: {
        'l-organization-select': organizationSelet,
    }
})
export default class carFormOrderInfo extends Vue {
    name:string = 'carFormOrderInfo'

    // 会员列表
    personalList:any[]
    
    // 公司 部门列表
    companys: any[]
    
    isEmptyObj:any = isEmptyObj

    carStateStore:any = carStateStore

    // 用户头像(暂用logo替换)
    userHeadPortrait: string = imgs.logo


    // 是否显示会员列表
    mebmerTableSwitch:boolean = false;

    memberInfoConf ={

        nickname:{
            key: 'DMnickname',
            icon: '',
            span: 24
        },
        company:{
            key: 'DMcompany',
            icon: 'icon-headlines',
            span: 12
        },
        department:{
            key: 'DMdepartment',
            icon: 'icon-headlines',
            span:12
        },
        
        
    }

    @Prop()
    data:internalInf.carOrderAPI
    
    @Prop()
    carUploadList: any[]
    
    get carUpFileLength(){
        let num = 0;

        this.carUploadList.forEach(item =>{

            if(item.url){
                num += 1
            }
            
        })
    
        return num
    }
    
    formatDate(date:string):string{
        let str = date.split('-');
        str[0] = str[0].slice(2);


        return str.join('/')
    }

    // 查看附件
    uploadSwitch (){
        carUpload.fn()
    }

    // 会员选择( 提交数据更新请求 )
    select(){
        
        
        this.$store.dispatch('carFormStore/updateMemberInfo')
    }
    
}

</script>

<style scoped lang='scss'>

.car-form-order-info{
    position: relative;
    min-height: 100%;
}

.orderId{
    margin-bottom: _rem(10px);
    border-radius: $border_radius;
    background: $main_color;
    font-size: $font_md;
    color: $font_light_color;
}

.info-content{

   margin: auto;
   max-width: _rem(240px);

  
}


 .member{

        display: flex;
        justify-content: left;
        align-items: center;
        
        position: relative;
        margin: auto;
        height: _rem(80px);
        font-size: $font_mini;
      
        
        .head-portrait{
            @extend %img_box;
            $size: _rem(60px);

            flex: 0 $size;
            width: $size;
            height: $size;
            border: _rem(1px) solid #fff;
            border-radius: 100%;
            box-shadow: iconHoverShadow();
        }

        .member-info{
            flex: 1 1;
            position: relative;
            padding-left: _rem(10px);

            &:hover{
                .edit{
                    opacity: 1;
                }
            }
            
        }

        .edit{
            @extend %position_center;
            opacity: 0;
            box-sizing: border-box;
            padding:   _rem(10px);
            font-size: $font_md;
            background: $block_bg_color;
            cursor: default;
            z-index: 9;

            transition: all $transition_time;
        }
        
        .nickname{
            margin: _rem(4px) 0 _rem(6px);
            font-size: $font_md;
            font-weight: 600;
        }

        .department,
        .company,
        .phone{
            @extend %text_overflow;
            display: flex;
            align-content: center;
            
            $size: _rem(20px);
            height: $size;
            line-height: $size;
        }
}

  .order-info{
        margin-top: _rem(10px);   
        padding-top: _rem(10px);
        padding-bottom: _rem(20px);
        // height: _rem(80px);
        border-top: _rem(1px) solid $border_color_light;   
        font-size: $font_small;

        .header{
            display: flex;
            justify-content: space-between;
            align-items: center;

            margin-bottom: _rem(10px);
        }

        .time{
            height: _rem(20px);

            line-height: _rem(20px);
            color: $font_secondary;
        }

        .txt{
            position: relative;
            padding: _rem(4px);
            border-radius: $border_radius;
            background: $default_bg;

            &::before{
                content: '';
                position: absolute;
                top: _rem(-12px);
                left: _rem(4px);
    
                border-top: _rem(6px) solid transparent;
                border-bottom: _rem(6px) solid $default_bg;
                border-left: _rem(6px) solid transparent;
                border-right: _rem(6px) solid transparent;
                
            }
        }

    }

.upload-file{
    $h: _rem(24px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    margin-top: _rem(10px);
    border-radius: $border-radius;
    transition: all $transition_time;
    
    line-height: $h;
    cursor: default;
    
    &:hover{
        color: $main_color;
        .icon{
            background: $main_color;
            color: #fff;
        }
    }

    .icon{
        $size: _rem(22px);
        display: inline-block;
        width: $size;
        height: $size;
        border-radius: 100%;
        font-size: $font-small;

        line-height: $size;
        text-align: center;
        transition: all $transition_time;
    }

    .file-lable{
        flex: 1 1;

    }

    .file-num{
        $size: _rem(14px);
        flex: 1 .5;
        text-align: right;

        span{
            position: relative;
            padding: _rem(2px) _rem(6px) _rem(2px) _rem(2px);
            border-radius: _rem(20px);
            background: $danger_color;

            text-align: center;
            color: $font_light_color;
        }
        
    }

}

</style>